.wos-network {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  font-weight: 300;
  color: var(--el-text-primary-color);
  text-shadow: none;
  background-color: var(--wos-box-center-bg);

  &__left {
    width: 200px;
    font-size: 14px;
    background-color: var(--wos-box-left-bg);

    .network-title {
      display: flex;
      padding: 16px;
      white-space: nowrap;
      cursor: pointer;

      &.check {
        background-color: var(--wos-box-right-bg);
      }

      &:hover {
        background-color: var(--el-table-row-hover-bg-color);
      }
    }
  }

  &__right {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    justify-content: space-between;
    padding: 8px;
    overflow: auto;
    background-color: var(--wos-box-right-bg);

    .card {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 0 8px;
      margin-bottom: 16px;
      background: transparent;
      border: solid 1px var(--wos-border-color);
      border-radius: var(--radius);

      .content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 12px;
        border-bottom: solid 1px var(--wos-border-color);

        .label {
          font-size: 14px;
          color: var(--wos-app-bar-color);
        }

        .desc {
          display: flex;
          flex-wrap: wrap;
          align-content: center;
          align-items: center;
          color: #666;
          color: var(--el-text-primary-color);
        }

        &:last-child {
          border-bottom: none;
        }
      }
    }

    .footer {
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
    }
  }
}
